<template>
    <div class="wait-task-page">
      <sl-task-card
        v-for="(item, index) in dataList"
        :key="'task-' + index"
        :title="item.title"
        :state="item.state"
        :time="item.time"
        :price="item.price">
        <div slot="info" v-if="item.info && item.info.name !== ''">
          <span class="name">{{item.info.name}}</span>
          <span class="use">{{item.info.use}}</span>
          <span class="use">{{item.info.plan}}</span>
          <span class="journey">{{item.info.journey}}</span>
          <span class="ticket">{{item.info.ticket}}</span>
          <span class="type">{{item.info.ticketType}}</span>
        </div>
        <div slot="desc" v-if="item.desc && item.desc.name">
          <span class="from">{{ item.desc.from }}</span>
          <span class="gutter"> - </span>
          <span class="to">{{ item.desc.to }}</span>
        </div>
      </sl-task-card>
    </div>
</template>

<script>
  import slTaskCard from './modules/sl-task-card/sl-task-card'
  export default {
    name: 'wait-task',
    data () {
      return {
        dataList: [
          // 任务状态state 0->待审批 1->待付款 2->审批中
          {
            taskType: 'apply',
            title: '支付审批',
            state: '待审批',
            time: '06-02 18:34',
            price: '34',
            info: {
              name: '吴慧超订',
              journey: '上海 一 北京',
              ticket: '1张',
              ticketType: '火车票'
            }
          },
          {
            taskType: 'order',
            title: '我的订单',
            state: '待付款',
            time: '06-02 18:34',
            price: '34',
            info: {
              name: '吴慧超订',
              use: '用车'
            },
            desc: {
              from: '上海普罗娜商务广场天',
              to: '上海市普陀区妇婴保健'
            }
          },
          {
            taskType: 'plan',
            title: '我的计划',
            state: '审批中',
            time: '06-02 18:34',
            price: '34',
            name: '吴慧超',
            plan: '申请06月01日 周四出差上海',
            info: {
              name: '吴慧超订',
              plan: '申请06月01日 周四出差上海'
            },
            desc: null
          }
        ]
      }
    },
    components: {
      slTaskCard
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>

</style>
